<template>
    <view class="container">
        <uv-popup ref="popup" mode="bottom" round="10" :closeable="true">
            <view class="prompt bgc-cccccc">
                <view class="prompt__title fs-34 fw-600 text-center pt-30">支付</view>

                <view class="m-30">
                    <view class="prompt__content fs-28 p-20  bgc-ffffff rounded-20">
                        <uv-list>
                            <uv-list-item title="购买">
                                <template #footer>
                                    MBTI职业性格测试
                                </template>
                            </uv-list-item>
                            <uv-list-item title="价格">
                                <template #footer>
                                    29.9元
                                </template>
                            </uv-list-item>
                            <uv-list-item title="优惠券" rightText="暂无可用优惠券" :show-arrow="true">

                            </uv-list-item>
                            <uv-list-item title="下单时间">
                                <template #footer>
                                    MBTI2025-02-09 10:01:25
                                </template>
                            </uv-list-item>
                        </uv-list>
                    </view>
                    <view class="prompt__content fs-28 p-20 mt-20  bgc-ffffff rounded-20">
                        <view>支付方式</view>
                        <view class="flex justify-between items-center mt-15">
                            <view class="fs-30 flex items-center">
                                <uv-icon name="weixin-circle-fill" size="40" color="green"></uv-icon>
                                <view class="ml-10">微信支付</view>
                            </view>
                            <view><uv-checkbox shape="circle" disabled></uv-checkbox></view>
                        </view>
                    </view>
                </view>
                <view class="prompt__btn my-30 flex justify-between p-30 items-center bgc-ffffff">
                    <view class="w-250">
                        待支付<text class="c-ff0000">￥29.9</text>
                    </view>
                    <view class="flex-1 ml-20">
                        <uv-button text="立即支付" shape="circle" color="#f03756" size="large" @click="toTask"></uv-button>
                    </view>
                </view>
            </view>
        </uv-popup>
        <view class="container__header">
            <uv-navbar :placeholder="true" bgColor="transparent" :fixed="false">
                <template #left>
                    <uv-tabs :activeStyle="{color:'#fff',fontWeight:'bold'}" :inactiveStyle="{color:'#c2c4ef'}"
                        :lineColor="`url(${lineBg}) 100% 100%`" :list="[{name:'测评'},{name:'我的报告'}]"></uv-tabs>
                </template>
            </uv-navbar>
            <view class="p-30">
                <view class="fs-38 fw-600 c-ffffff">
                    MBTI职业性格测试
                </view>
                <view class="fs-26 c-bbbbbb pt-15">筛查焦虑、抑郁、压力水平等常见心理指标，识别情绪波动规律，提供对应策略与专业资源指引。</view>
                <view class="flex py-30 items-center">
                    <view class="c-ffffff fs-36 fw-600">￥19.9</view>
                    <view class="original fs-30">￥29.9</view>
                </view>
                <view class="tag flex justify-between pb-40">
                    <view class="tag__item">93道精选题</view>
                    <view class="tag__item">12页报告解读</view>
                    <view class="tag__item">5.86w人已测</view>
                </view>
            </view>
        </view>
        <view class="container__body">
            <view class="flex justify-center">
                <view class="container__body-tabs w-500 py-30">
                    <uv-tabs :list="[{name:'测评介绍'},{name:'测评须知'},{name:'精选推荐'}]"
                        :activeStyle="{color:'#6e64c2',padding:'10rpx 20rpx',fontWeight:'bold'}" lineColor="#6e64c2"
                        :itemStyle="{height:'auto',padding:'0'} " line-width="60"
                        :inactiveStyle="{padding:'10rpx 20rpx',color:'#666a74'}" :scrollable="false"></uv-tabs>
                </view>
            </view>
            <view class="container__content bgc-ffffff px-30 pb-40">
                瑞士心理学家荣格(Carl Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段（又分为触觉感知阶段和直觉感知阶段）和判断阶段（又分为感性判断和理性判断阶段）。
                MBTI理论认为，人的心理可以通过四个维度来描述，即个体能量的流动方向：外倾（Extraversion, E）与内倾（Introversion, I）偏好；个体获取信息的感知方式：感觉（Sensing,
                S）与直觉（Intuition, N）偏好；个体处理信息的决策方式：思考（Thinking, T）与情感（Feeling, F）偏好；个体与周围世界的接触方式：判断（Judging,
                J）与知觉（Perceiving, P）偏好。瑞士心理学家荣格(Carl
                Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段（又分为触觉感知阶段和直觉感知阶段）和判断阶段（又分为感性判断和理性判断阶段）。
                MBTI理论认为，人的心理可以通过四个维度来描述，即个体能量的流动方向：外倾（Extraversion, E）与内倾（Introversion, I）偏好；个体获取信息的感知方式：感觉（Sensing,

            </view>
        </view>
        <view class="container__footer h-140">
            <TabBar theme="custom">
                <template #bar>
                    <Mybutton @click="popup.open()" title="￥29.9 立即测评" :transition="true" color="#fff" width="380rpx"
                        borderRadius="30rpx">
                    </Mybutton>
                </template>
            </TabBar>
        </view>
    </view>
</template>
<script setup lang="ts">
    import TabBar from "@/components/TabBar.vue";
    import Mybutton from "@/components/Button.vue";
    import { onMounted, ref } from "vue";
    const popup = ref('');
    const lineBg =
        "";
    onMounted(() => {
        setTimeout(() => {
            popup.value.open();
        }, 2000)
    })
    const toTask = () => {
        uni.navigateTo({
            url: "/pages/task/project"
        })
    }
</script>
<style scoped lang="scss">
    .container {
        background-color: #f6f7fb;
        min-height: 100vh;

        &__header {
            background-color: #464bb3;
        }

        .original {
            color: #a67ee2;
            font-style: italic;
            text-decoration: line-through;
            margin-left: 20rpx;
        }

        .tag {
            &__item {
                background-color: #635cc2;
                border-radius: 20rpx;
                font-size: 24rpx;
                padding: 5rpx 25rpx;
                color: #aeabdb;
            }
        }

        &__body {
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            margin-top: -20rpx;
            background-color: #fff;
        }
    }
</style>